<template>
	<view class="body">
		<u-navbar title="邀请用户" back-icon-color="#FFF" title-color="#FFF" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>
		<view class="top">
			<view class="top-invite">
				<image src="/static/user/invite4@2x.png" mode="aspectFill"></image>
				<text>暂无身份</text>
			</view>
			<view class="top-id">
				<text>
					我的等级
					<span>{{ user.memberName }}</span>
				</text>
				<text>
					上级ID
					<span>{{ user.invitationCodeBy }}</span>
				</text>
			</view>
		</view>
		<view class="flex flex-center">
			<view class="center">
				<text>我的邀请码</text>
				<view class="center-copy">
					<text>{{ user.invitationCode }}</text>
					<image
						@click="onCopy(user.invitationCode)"
						src="/static/user/Frame(1).png"
						style="width: 24rpx; height: 24rpx; margin: 0rpx 0 0 10rpx"
						mode="aspectFill"
					></image>
				</view>
			</view>
		</view>
		<view class="bottom">
		<!-- 	<button class="bottom-left">
				<image src="/static/user/invite3@2x.png" mode="aspectFill"></image>
				<text>转发链接</text>
			</button> -->
			<button class="bottom-right" @click="codeUrl">
				<image src="/static/user/invite2@2x.png" mode="aspectFill"></image>
				<text>邀请海报</text>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {}
		};
	},
	onLoad() {
		this.user = uni.getStorageSync('user');
		console.log(this.user);
	},
	methods: {
		onCopy(row) {
			wx.setClipboardData({
				data: row,
				success(res) {
					wx.showToast({
						title: '复制成功',
						icon: 'success'
					});
				}
			});
		},
		codeUrl() {
			uni.navigateTo({
				url: '/pages/user/InvitationCode/InvitationCode'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}

.body {
	width: 750rpx;
	height: 416rpx;
	background: linear-gradient(180deg, #f5511e 0%, rgba(245, 245, 245, 0.27) 100%);
}

.top {
	margin: 40rpx 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	position: relative;
	height: 320rpx;
	.top-invite {
		width: 688.87rpx;
		height: 228rpx;
		background: url('@/static/user/invite1@2x.png');
		background-size: 688.87rpx 228rpx;
		position: absolute;
		top: 0;
		z-index: 100;

		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 45rpx;
		image {
			width: 178rpx;
			height: 62rpx;
		}
		text {
			font-size: 24rpx;
			color: #9f3f2a;
		}
	}
	.top-id {
		position: absolute;
		width: 686rpx;
		height: 174rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		bottom: 0;
		z-index: 1;

		padding-top: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text {
			/* 行高 = span字号，实现容器高度对齐 */
			line-height: 42rpx;
			/* 行内元素中线对齐关键属性 */
			vertical-align: middle;
			/* 控制对齐基准 */
			display: inline-flex;
			align-items: center;

			font-size: 28rpx;
			color: #9f3f2a;

			span {
				font-weight: 500;
				font-size: 42rpx;
				color: #9f3f2a;
				margin-left: 20rpx;
				/* 消除行高继承影响 */
				line-height: 1;
				/* 微调基线对齐 */
				vertical-align: -0.15em;
			}
		}
	}
}

.center {
	width: 686rpx;
	height: 86rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 20rpx;
	font-size: 28rpx;
	color: #9f3f2a;

	.center-copy {
		font-weight: 600;
		font-size: 36rpx;
		color: #9f3f2a;
	}
}

.bottom {
	margin-top: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;

	button {
		width: 220rpx;
		height: 80rpx;
		border-radius: 70rpx 70rpx 70rpx 70rpx;

		font-weight: 500;
		font-size: 28rpx;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom-left {
		background: #f05a39;
		color: #ffffff;
	}

	.bottom-right {
		background: #ffe9e4;
		color: #f05a39;
	}

	image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
}
</style>
